<template>
  <div class="aside">
   
    <el-menu class="el-menu-vertical-demo" :collapse="isCollapse"
        background-color="#324157"
        text-color="white"
        mode="vertical"
        router
    >
      <template v-for="item1 in data.arr">
        <template v-if="item1.next">
          <el-sub-menu :index="item1.title" :key="item1.id">
            <template #title>
          <el-icon>
            <!-- 用component 来生成自定义标签 -->
              <component :is="item1.icon1"></component>
          </el-icon>
              <span>{{ item1.title }}</span>
            </template>

            <template v-for="item2 in item1.next">
              <template v-if="item2.next">
                <el-sub-menu :index="item2.index" :key="item2.id" >
                  <template #title>
                    <el-icon>
                      <component :is="item2.icon2"></component>
                    </el-icon>
                    <span>{{ item2.title }}</span>
                  </template>

                  <div v-for="item3 in item2.next" :key="item3.id">
                    <el-menu-item :index="item3.index" :key="item3.id" >
                      <el-icon>
                          <component :is="item3.icon3"></component>
                      </el-icon>
                      <template #title>{{ item3.title }}</template>
                    </el-menu-item>
                  </div>
                </el-sub-menu>
              </template>


              <template v-else>
                <el-menu-item :index="item2.index" :key="item2.id" >
                  <el-icon>
                      <component :is="item2.icon2"></component>
                  </el-icon>
                  <template #title>{{ item2.title }}</template>
                </el-menu-item>
              </template>
              
            </template>
          </el-sub-menu>
        </template>

        <template v-else>
          <el-menu-item :index="item1.index" :key="item1.id" >
            <el-icon>
                <component :is="item1.icon1"></component>
            </el-icon>
            <template #title>{{ item1.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup >
import { ref, reactive ,getCurrentInstance} from "vue";
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from "@element-plus/icons-vue";
const isCollapse = ref(true);
var {proxy} =getCurrentInstance()
const bus =proxy.$bus
bus.on('change',()=>{
    isCollapse.value=!isCollapse.value
    console.log(isCollapse.value);
})
const data = reactive({
  arr: [
    {
      title: "文件处理",
      id: "01",
      icon1:'Aim',
      next: [
        { title: "文件上传", id: "011", index: "/upload" ,icon2:'Avatar'},
        {
          title: "文件编辑器",
          id: "012",
          index: "/edit",
          icon2:'Calendar'
        },
          {
          title: "MarkDown",
          id: "013",
          index: "/markDown",
          icon2:'Calendar'
        }
      ],
    },
    {
      title: "拖拽组件",
      id: "02",
      icon1:'Apple',
      next: [
        { title: "拖拽列表", id: "021", index: "/file-list",icon2:'Basketball' },
        { title: "拖拽弹框", id: "022", index: "/file-window" ,icon2:'Baseball'},
      ],
    },
    {
      title:'自定义图标',
      id:'03',
      icon1:'House',
      index:'/icon'
    }
  ],
});
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.aside{
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 0;
    background-color: #324157;
}

</style>